<template>
  <div class="app-container">
     <el-row :gutter="20">
     <el-col :span="6">
        <panel-group :basicData="companyData"></panel-group>
      </el-col>
      <el-col :span="6">
        <panel-group :basicData="userData"></panel-group>
      </el-col>
      <el-col :span="6">
        <panel-group :basicData="courseData"></panel-group>
      </el-col>
      <el-col :span="6">
        <panel-group :basicData="orderData"></panel-group>
      </el-col>
    </el-row>
     <div class="studyTime-container mag30 content">
      <el-row class="nav-container">
         <el-col :span="10">
          <span
            class="nav-title"
            :class=" statisType== 'habit'?'is-active':''"
            @click="changeStatisType('habit')"
          >学习习惯</span>
          <span
            class="nav-title"
            :class=" statisType== 'user'?'is-active':''"
            @click="changeStatisType('user')"
          >学习人数</span>
        </el-col>
         <el-col :span="7">
          <span
            v-for="item in dateArray"
            :key="item.name"
            class="nav-title"
            :class="item.value == statisticsTimeData.timeType?'is-active':''"
            @click="changeTimeType(item)"
          >{{item.name}}</span>
        </el-col>
        <el-col :span="7" style="padding-top:10px;">
          <el-date-picker
            v-model="dateScope"
            :unlink-panels="true"
            size="medium"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getTimeArray"
          ></el-date-picker>
        </el-col>
      </el-row>
    </div>
    <el-row class="content">
      <el-col :span="24" style="padding:20px;">
        <bar-chart
          :xAxisData="barChartXAxisData"
          :chartData="barChartData"
          :data-name="studyStatisData.dataName"
          :yAname="studyStatisData.yAname"
          :xRotate="studyStatisData.xRotate"
          width="96%"
        ></bar-chart>
      </el-col>
    </el-row>
    <div class="studyTime-container mag30 content">
      <el-row class="nav-container">
        <el-col :span="10">
          <span class="nav-title is-active">课程销量排行</span>
        </el-col>
      </el-row>
    </div>
    <el-row class="content">
      <el-col :span="24" style="padding:20px;">
        <bar-chart
          :xAxisData="salesChartXAxisData"
          :chartData="salesChartData"
          data-name="学习人数"
          yAname="人数"
          width="96%"
          :xRotate="40"
        ></bar-chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from "moment/moment";
import { timeForMat, safariDate, getMomentValue } from "@/utils/index";
import {getStudyTimePeriod,getCourseRanking,getStudyUsersByTime,getUserNum,getCompanyNum,getCourseNum,getOrderNum} from "@/api/dashboard";
import BarChart from "@/components/Echarts/BarChart";
import PanelGroup from "@/components/Echarts/PanelGroup";
export default {
  name: 'qualityin',
  computed: {
    
  },
  components:{
      PanelGroup,
      BarChart,
  },
  data(){
    return{
      companyData: {
        icon: "library",
        text: "企业数",
        value: 0
      },
      userData: {
        icon: "peoples",
        text: "人员数",
        value: 0
      },
      courseData: {
        icon: "play",
        text: "课程数",
        value: 0,
      },
       orderData: {
        icon: "shoppingCard",
        text: "学习卡订单数",
        value: 0,
      },
       dateArray: [
        {
          name: "今日",
          value: "1"
        },
        {
          name: "本周",
          value: "2"
        },
        {
          name: "本月",
          value: "3"
        },
        {
          name: "全年",
          value: "4"
        }
      ],
       studyStatisData: {
        //学习数据chart 数据对象
        dataName: "学习时长/分钟",
        xAname: "时间",
        yAname: "分钟"
      },
      statisType: "habit", //数据类型（学习习惯、学习人数）
      statisticsTimeData: {
        //学习习惯 学习人数接口参数
        timeType: "2",
        startTime: "",
        endTime: ""
      },
      dateScope: [], //日期范围
      salesChartXAxisData:[],//销量
      salesChartData:[],
      barChartXAxisData: [], //时段数据
      barChartData: []

    }
  },
  created(){
      this.initData();
  },
  methods:{
    async initData() {
       let companyNum = await getCompanyNum();
      let userNum = await getUserNum({}); 
      let courseNum = await getCourseNum();
      let orderNum = await getOrderNum();
      let getStudyTimePeriod = await this.getStudyTimePeriod(
        this.statisticsTimeData
      );
      let getCourseRanking = await this.getCourseRanking();
      this.userData.value = userNum.entity ? userNum.entity.userNum : 0;
      this.companyData.value = companyNum.entity ? companyNum.entity.num : 0;
      this.courseData.value = courseNum.entity ? courseNum.entity.num : 0;
      this.orderData.value = orderNum.entity ? orderNum.entity : 0;

    },
     getStudyUsersByTime(data) {
      getStudyUsersByTime(data).then(res => {
        let entity = res.entity;
        this.barChartXAxisData = [];
        if(this.statisticsTimeData.timeType !='4'){
           entity.time.forEach(item => {
            this.barChartXAxisData.push(moment(item).format("MM-DD"));
          });
        }else{
           this.barChartXAxisData = entity.time;
        }
        
        this.barChartData = entity.data;
        this.studyStatisData = {
          //学习数据chart 数据对象
          dataName: "学习人数",
          xAname: "时间",
          yAname: "人",
          xRotate:"50"
        };
      });
    },
     getStudyTimePeriod(data) {
      getStudyTimePeriod(data).then(res => {
        let entity = res.entity;
        this.barChartXAxisData = entity.time;
        this.barChartData = entity.data;
        this.studyStatisData = {
          //学习数据chart 数据对象
          dataName: "学习人数",
          xAname: "时间",
          yAname: "人数",
          xRotate:"0"
        };
      });
     },
     getCourseRanking(data){
       getCourseRanking(data).then(res => {
        let entity = res.entity;
        this.salesChartXAxisData = entity.name;
        this.salesChartData = entity.data;
       
      });
     },
     getTimeArray() {
      this.statisticsTimeData.timeType = "";
      this.statisticsTimeData.startTime = getMomentValue(this.dateScope[0]);
      this.statisticsTimeData.endTime = getMomentValue(this.dateScope[1]);
      this.getStudyStatisticsType();
    },
     getStudyStatisticsType() {
      //判断请求不同数据数据
      if (this.statisType == "habit") {
        this.getStudyTimePeriod(this.statisticsTimeData);
      } else {
        this.getStudyUsersByTime(this.statisticsTimeData);
      }
    },
     changeStatisType(type) {
      this.statisticsTimeData.timeType = "1";
      this.statisticsTimeData.startTime = "";
      this.statisticsTimeData.endTime = "";
      this.statisType = type;
      this.getStudyStatisticsType();
    },
     changeTimeType(item) {
      this.statisticsTimeData.startTime = "";
      this.statisticsTimeData.endTime = "";
      this.dateScope = [];
      this.statisticsTimeData.timeType = item.value;
      this.getStudyStatisticsType();
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/studyStatistics.scss";

</style>
